<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bootstrap</title>
    <!-- <link rel="stylesheet" href="lib/bootstrap.css" > -->
    <!-- <link href="css/index.css" rel="stylesheet" > -->
</head>
<body>

<header class="mynav-header">
    <nav class="navbar navbar-expand-md navbar-light container">
        <a class="navbar-brand hidden-md" href="#">Bootstrap中文网</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto nav-left">
                <li class="hidden-lg">
                    <a class="nav-link" href="#">Bootstrap2中文文档 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Bootstrap3中文文档</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Bootstrap4中文文档</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Less 教程</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">jQuery API</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">网站实例</a>
                </li>
            </ul>
            <ul class="navbar-nav nav-right hidden-md">
                <li class="nav-item">
                    <a class="nav-link" href="#">关于</a>
                </li>
            </ul>
        </div>
    </nav>

</header>

<div class="poster">
    <div class="container">
        <h1>Bootstrap</h1>
        <h2>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
        <p>
            <a href="#" class="v3 btn btn-lg btn-primary btn-shadow">Bootstrap3中文文档(v3.3.7)</a>
        </p>
        <a href="#" class="v2">Bootstrap2中文文档(v2.3.2)</a>
    </div>
</div>

<div class="social-link container-fluid">
    <ul class="social-list">
        <li>
            <a href="#">
                <i></i>
                Bootstrap问答社区
            </a>
        </li>
        <li> | </li>
        <li>
            <a href="#">
                <i></i>
                新浪微博：@Bootstrap中文网
            </a>
        </li>
    </ul>
</div>

<div class="program container">
    <div class="pro-header">
        <h2>Bootstrap相关优质项目推荐</h2>
        <p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
    </div>

    <div class="pro-content row">
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="item-container">
                <img src="./static/images/expo.png" title="Bootstrap 网站实例" class="lazy">
                <h3>
                    <a href="#">优站精选</a><br>
                    <small> Bootstrap 网站实例</small>
                </h3>
                <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="item-container">
                <img src="./static/images/jqueryapi.png" alt="jQuery" class="lazy">
                <h3>
                    <a href="#">jQuery API </a><br/>
                    <small>中文手册</small>
                </h3>
                <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="item-container">
                <img src="./static/images/nodejs.png" alt="" class="lazy">
                <h3>
                    <a href="#">Node.js</a><br/>
                    <small>中文文档 / 手册</small>
                </h3>
                <p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="item-container">
                <img src="./static/images/webpack.png" alt="" class="lazy">
                <h3>
                    <a href="#">Webpack</a><br/>
                    <small>是前端资源模块化管理和打包工具</small>
                </h3>
                <p>Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="item-container">
                <img src="./static/images/vuejs.png" alt="" class="lazy">
                <h3>
                    <a href="#">Vue.js</a><br/>
                    <small> 中文文档。</small>
                </h3>
                <p>Vue.js - 是一套构建用户界面的渐进式框架。</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="item-container">
                <img src="./static/images/zeptojs.png" alt="zeptojs" class="lazy">
                <h3>
                    <a href="#">Zepto.js </a><br>
                    <small>JavaScript 工具库</small>
                </h3>
                <p>Zepto.js 是一个轻量级、兼容 jQuery 的 JavaScript 工具库。</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="item-container">
                <img src="./static/images/react.png" alt="react" class="lazy">
                <h3>
                    <a href="#">React</a><br>
                    <small>用于构建用户界面的 JavaScript 框架</small>
                </h3>
                <p>React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="item-container">
                <img src="./static/images/lesscss.png" alt="Less" class="lazy">
                <h3>
                    <a href="#">LESS </a><br>
                    <small>一种动态样式语言</small>
                </h3>
                <p>LESS 为 CSS 赋予了动态语言的特性，如变量、继承、运算、函数。LESS 既可以在客户端上运行 (支持 IE 6+、Webkit、Firefox)，也可以借助 Node.js 或者 Rhino 在服务端运行。</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="item-container">
                <img src="./static/images/expo.png" title="Bootstrap 网站实例" class="lazy">
                <h3>
                    <a href="#">优站精选</a><br>
                    <small> Bootstrap 网站实例</small>
                </h3>
                <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="item-container">
                <img src="./static/images/jqueryapi.png" alt="jQuery" class="lazy">
                <h3>
                    <a href="#">jQuery API </a><br/>
                    <small>中文手册</small>
                </h3>
                <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="item-container">
                <img src="./static/images/nodejs.png" alt="" class="lazy">
                <h3>
                    <a href="#">Node.js</a><br/>
                    <small>中文文档 / 手册</small>
                </h3>
                <p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="item-container">
                <img src="./static/images/webpack.png" alt="" class="lazy">
                <h3>
                    <a href="#">Webpack</a><br/>
                    <small>是前端资源模块化管理和打包工具</small>
                </h3>
                <p>Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="item-container">
                <img src="./static/images/vuejs.png" alt="" class="lazy">
                <h3>
                    <a href="#">Vue.js</a><br/>
                    <small> 中文文档。</small>
                </h3>
                <p>Vue.js - 是一套构建用户界面的渐进式框架。</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="item-container">
                <img src="./static/images/zeptojs.png" alt="zeptojs" class="lazy">
                <h3>
                    <a href="#">Zepto.js </a><br>
                    <small>JavaScript 工具库</small>
                </h3>
                <p>Zepto.js 是一个轻量级、兼容 jQuery 的 JavaScript 工具库。</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="item-container">
                <img src="./static/images/react.png" alt="react" class="lazy">
                <h3>
                    <a href="#">React</a><br>
                    <small>用于构建用户界面的 JavaScript 框架</small>
                </h3>
                <p>React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。</p>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <div class="item-container">
                <img src="./static/images/lesscss.png" alt="Less" class="lazy">
                <h3>
                    <a href="#">LESS </a><br>
                    <small>一种动态样式语言</small>
                </h3>
                <p>LESS 为 CSS 赋予了动态语言的特性，如变量、继承、运算、函数。LESS 既可以在客户端上运行 (支持 IE 6+、Webkit、Firefox)，也可以借助 Node.js 或者 Rhino 在服务端运行。</p>
            </div>
        </div>

    </div>

</div>

<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-xl-6">
                <div class="footer-left">
                    <img src="./static/images/logo.png" alt="">
                    <p>我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具！</p>
                </div>
            </div>
            <div class="col-lg-6 col-xl-5 col-xl-offset-1 footer-right">
                <div class="row">
                    <div class="col-xl-3 col-lg-3 col-md-3"  >
                        <div class="content-container">
                            <h4>关于</h4>
                            <ul>
                                <li><a href="#">关于我们</a></li>
                                <li><a href="#">广告合作</a></li>
                                <li><a href="#">友情链接</a></li>
                                <li><a href="#">招聘</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-3">
                        <div class="content-container">
                            <h4>联系方式</h4>
                            <ul>
                                <li><a href="#">新浪微博</a></li>
                                <li><a href="#">电子邮箱</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-4">
                        <div class="content-container">
                            <h4>旗下网站</h4>
                            <ul>
                                <li><a href="#">Laravel中文网</a></li>
                                <li><a href="#">Ghost中国</a></li>
                                <li><a href="#">BootCDN</a></li>
                                <li><a href="#">Packagist中国镜像</a></li>
                                <li><a href="#">燃腾教育</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-2">
                        <div class="content-container">
                            <h4>赞助商</h4>
                            <ul>
                                <li><a href="#">猫云</a></li>
                                <li><a href="#">京东云</a></li>
                                <li><a href="#">又拍云</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="copyright">
        <ul class="list">
            <li>
                <a href="#">京ICP备11008151号</a>
            </li>
            <li> | </li>
            <li>
                <a href="#">京公网安备11010802014853</a>
            </li>
        </ul>
    </div>
</footer>

<a id="scrollTop" href="#top">
    <i></i>
</a>


<!-- <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> -->
</body>
</html>